@import url("../../styles/publicStyle.less");

.legal-service-container {
  .widthAndHeight(100%, 94%);
  position: relative;
  padding: 140px 20px 0 20px;
  box-sizing: border-box;
  .contentOverflowRoll();

  &::-webkit-scrollbar {
    display: none;
  }

  .legal-service-hd-con {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);

    .legal-service-hd-bg {
      .widthAndHeight(376px, 96px);
      .background(url("@{images}/legal_service_hd.png"));
    }
  }

  .legal-service-list {
    .legal-service-list-item {
      margin-bottom: 28px;

      &:last-of-type {
        margin-bottom: 0;
      }

      h3 {
        .flex();
        .DetailsText();
        margin-bottom: 28px;

        img {
          .widthAndHeight(48px, 48px);
        }
      }

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          .DetailsInfoTitle();
          .textGather(auto, 64px);
          color: @ContentText;
          padding: 0 20px;
          border-radius: 32px;
          // border: 4px solid @AssistLightGrey;
          box-shadow: 0 0 4px @AssistLightGrey;
          margin: 0 20px 20px 0;

          &.ls-active {
            color: @ContentTextWhite;
            background-color: @MainColor;
            border: 2px solid @MainColor;
          }
        }
      }

      .legal-service-info {
        p {
          .DetailsInfoTitle();
          display: flex;
          margin-bottom: 24px;
          letter-spacing: 1px;

          &:last-of-type {
            letter-spacing: 0;
          }

          &>span:first-of-type {
            width: 140px;
            font-weight: 600;
          }

          &>span:last-of-type {
            flex: 1;
            color: @ContentText;
          }

          .matters-name {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;

            .ls-name {
              flex: 1;
              color: @TitleText;
              font-weight: 600;
            }

            .ls-link {
              max-width: 250px;

              span {
                .flex();
                color: @AssistTextA;
                margin-bottom: 15px;

                &:last-of-type {
                  margin-bottom: 0;
                }

                img {
                  .widthAndHeight(34px, 36px);
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }
  }

}
